<script>
// import _ from 'lodash'
export default {
  name: 'Main',
  components: {},
  data () {
    return {
      isCollapse: false,
      asideWidth: '230px'
    }
  },
  created () {},
  watch: {},
  methods: {
    changeCollapse () {
      this.isCollapse = !this.isCollapse
      this.$emit('collapse-change', this.isCollapse)
      if (this.isCollapse) {
        this.asideWidth = '65px'
      } else {
        this.asideWidth = '230px'
      }
    }
  }
}
</script>

<template>
  <el-container>
    <el-aside :width="asideWidth">
      <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="default-scrollbar__view">
        <div class="demo">
          aside
        </div>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header class="clear">
        <div class="collapse-btn" @click.prevent="changeCollapse">
          <i class="fas fa-bars" :class="{ rotate90: isCollapse }"></i>
        </div>
      </el-header>
      <el-main>
        <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="p20-scrollbar__view">
          <div class="main">
            main
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.collapse-btn {
  float: left;
  font-size: 24px;
  cursor: pointer;
}
.rotate90 {
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.demo {
  width: 100px;
  height: 1024px;
  background: #0f0;
}
.main {
  width: 300px;
  height: 1024px;
  background: #00f;
}
</style>
